<template>
    <div class="tablelist_wrap" :class="(showOrTree && treeOnly == 'treeOnly' )? 'width1':''">
        <div class="left-btn" @click="showTree" v-if="treeOnly == 'treeOnly'">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="table_title table_title_big">
            <div class="add-tips">
                <h3 v-if="title">{{ title }}</h3>
                <div class="tip-btn-box" v-if="teamAnalysis">
                    <div :class="activeN == 0?'active':''" @click="handleClickN(0)">全部数量{{ Ztotal }}</div>
                    <div :class="activeN == 1?'active':''" @click="handleClickN(1)">当前数量{{ Dtotal }}</div>
                </div>
            </div>
            <div v-if="statistics" class="statistics">{{statistics}}</div>
            <slot name="titleBtn"/>
        </div>
        <el-table v-loading="loading" class="tableList" :data="tableData" :row-class-name="rowClass" stripe ref="table"
                  :header-cell-style="tableHeaderColor" @sort-change="sortlist" @selection-change="handleSelectionChange"
                  @row-click="handleRowClick" :border="tableBorder" :row-key="partDetailId">
            <el-table-column
                    v-if="Checkbox"
                    type="selection"
                    width="55"  :reserve-selection="true">
            </el-table-column>
            <el-table-column v-for="(item, index) in tableDataColumn" :key="index" :sortable="item.sortable?'custom':false"
                             :prop="item.key" :label="item.label" :show-overflow-tooltip="true" :width="item.width"
                             :min-width="item.minWidth" :align="item.align?item.align:'center'">
                <template slot="header">
          <span v-if="item.isonly?true:false">
            <span :class="searjuery[item.key] == 1 ?'active':''" @click="onlysort(item.key)">{{ item.label }}<i
                    class="el-icon-s-operation"/></span>
          </span>
                    <span v-else>
            {{ item.label }}
          </span>
                </template>
                <template slot-scope="scope">
                    <div v-if="item.editType=='datetime'&&scope.row.editType=='datetime'">
                        <el-date-picker v-model="scope.row[item.key]" :picker-options="pickerOptions(item.start)" type="datetime"
                                        value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%"/>
                    </div>
                    <div v-else-if="item.type=='imageList'">
                        <div style="display: flex;flex-wrap: wrap">
                            <div v-for="(ftp,num) in scope.row[item.key].split(',')">
                                <u class="pic-iitem" @click="filePreview(scope.row[item.key],num)">
                                    {{ ftp.split('-')[1] }}
                                </u>
                            </div>
                        </div>
                    </div>
                    <div v-else-if="item.type=='singleImage'">
                        <div class="single-image">
                            <u class="pic-iitem" @click="filePreview(scope.row[item.path],0)">
                                {{ scope.row[item.key] || '-' }}
                            </u>
                        </div>
                    </div>
                    <div v-else-if="item.type=='image'">
                        <img :src="ftpDownload+scope.row[item.key]" class="image"></img>
                    </div>
                    <div v-else-if="item.type=='imageCode'"  class="image-code-box"  @click="tcFd(scope.row)">
                        <img :src="scope.row[item.key]" class="image-code"></img>
                        <div class="lens">点击查看</div>
                    </div>
                    <div v-else-if="item.type=='input'">
                        <el-input v-model="scope.row[item.key]" :disabled="item.disabled" @input="inputVal($event,item.key,scope.row)"/>
                    </div>
                    <div v-else-if="item.type=='inputNum'">
                        <el-input-number v-model="scope.row[item.key]"   @change="changeQuantity(scope.row)" :min="1"  ></el-input-number>
                    </div>
                    <div v-else-if="item.key=='index'">
                               {{ scope.$index + 1 }}
<!--                        {{(searjuery.pageIndex - 1) * searjuery.pageSize + scope.$index + 1}}-->
                    </div>
                    <div v-else-if="item.type=='link'">
                        <span class="bluefont">{{ scope.row[item.key] }}</span>
                    </div>
                    <div v-else-if="item.type=='html'">
                        <div v-html="scope.row[item.key]"></div>
                    </div>
                    <div v-else-if="item.type=='jd'">
                        <div class="blue-font" @click="shzt(scope.row)"> {{scope.row[item.key] }}</div>
                    </div>
                    <span v-else-if="item.type==='select' && scope.row.BmzdList">
            <el-select v-model="unitCities[scope.row.ryglId]" :placeholder="item.placeholder" style="width: 100%"
                       clearable @change="getfwlx($event,scope.row.ryglId)">
              <el-option v-for="item1 in scope.row.BmzdList" :key="item1.deptId" :label="item1.deptName"
                         :value="item1.deptId+''" :disabled="item1.disabled"/>
            </el-select>
          </span>
                    <div v-else-if="item.type=='belongArea'">
                        <span>{{ getArea(item.list, scope.row) }}</span>
                    </div>
                    <div v-else-if="item.type=='slot'">
                        <template>
                            <slot name="publicSlot" :row="scope.row" :keyName="item.key" :index="scope.$index"/>
                        </template>
                    </div>
                    <!--          {{scope.row.sbmname !=null?scope.row.sbmname: scope.row.qxbmname !=null?scope.row.qxbmname:scope.row.jdbmname !=null?scope.row.jdbmname:scope.row.sqbmname!=null?scope.row.sqbmname:scope.row.xqbmname !=null?scope.row.xqbmname:''}}-->

                    <div v-else-if="item.type == 'ssqyyjyaty'">
                        {{ scope.row.xqbmname != null ? scope.row.xqbmname : scope.row.sqbmname != null ? scope.row.sqbmname : scope.row.jdbmname != null ? scope.row.jdbmname : scope.row.qxbmname != null ? scope.row.qxbmname : scope.row.sbmname != null ? scope.row.sbmname : '' }}
                    </div>
                    <div v-else-if="item.type == 'array'">{{ scope.row[item.name][0] ? "已完成" : "未完成" }}</div>
                    <div v-else-if="item.type == 'object' && scope.row[item.name]">{{ scope.row[item.name][item.key] }}</div>
                    <div v-else>{{ item.formatter ? item.formatter(scope.row[item.key]) : scope.row[item.key] }}</div>
                </template>
            </el-table-column>
            <el-table-column v-if="hideZdy" label="操作" :width="width" align="center" fixed="right">
                <template slot-scope="scope">
                    <slot name="btnGroups" :row="scope.row" :index="scope.$index"/>
                </template>
            </el-table-column>
        </el-table>
        <div class="fenye" v-if="ispagination && searjuery.total>0">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="searjuery.pageIndex"
                    :page-sizes="pageSizes"
                    :page-size="searjuery.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="searjuery.total">
            </el-pagination>


        </div>

        <!-- 图片预览 -->
        <image-viewer v-if="view.visible" :z-index="999" :initial-index="view.initialIndex" :on-close="closeViewer"
                      :url-list="view.previewSrcList"/>
    </div>
</template>

<script>
    import ImageViewer from "element-ui/packages/image/src/image-viewer";
    import BcUpload from "@/components/BcUpload";
    import {string} from "clipboard";

    export default {
        name: "TableList",
        components: {BcUpload, ImageViewer},
        props: {
            treeOnly: {
                type: String,
                default: ''
            },
            sqid: {
                type: String,
                default: "",
            },
            type: {
                type: String,
                default: "",
            },
            isedit: {
                type: Boolean,
                default: false,
            },
            loading: {
                type: Boolean,
                default: false,
            },
            ispagination: {
                type: Boolean,
                default: true,
            },
            Ztotal:{
                type: Number,
                default: 0
            },
            Dtotal:{
                type: Number,
                default: 0
            },
            title: {
                type: String,
                default: "",
            },
            teamAnalysis:{
                type: Boolean,
                default: false,
            },
            statistics: {
                type: String,
                default: "",
            },
            status: {
                type: [String, Number],
                default: undefined,
            },
            tableDataColumn: {
                type: Array,
                default() {
                    return [];
                },
            },
            tableData: {
                type: Array,
                default() {
                    return [];
                },
            },
            pageSizes: {
                type: Array,
                default() {
                    return [10, 20, 30, 40, 50, 100];
                },
            },
            searjuery: {
                type: Object,
                default() {
                    return {};
                },
            },
            fileList: {
                type: Array,
                default() {
                    return [];
                },
            },
            unitCities: {
                type: Object,
                default() {
                    return {};
                },
            },
            hideZdy: {
                type: Boolean,
                default: true,
            },
            width: {
                type: string,
                default: "200px",
            },
            titbtn: {
                //志愿服务评价用
                type: String,
                default: "",
            },
            Checkbox: {
                type: Boolean,
                default: false
            },
            tableBorder: {
                type: Boolean,
                default: true
            },
          partDetailId:{
            type: String,
            default: "partDetailId",
          },
            applyNumber:{
                type: Number,
                default: 0,
            },
        },
        /* data() {
          return {
            width: 0
          }
        },*/
        data() {
            return {
                showOrTree: true,
                ftpDownload: this.$store.getters.ftpInfo
                    ? this.$store.getters.ftpInfo.download
                    : "http://172.16.1.54:3001",
                view: {
                    initialIndex: 0,
                    visible: false,
                    previewSrcList: [],

                },
                activeN:1,
              multipleSelection:[]
            };
        },
        watch: {
            tableDatacolumn: {
                handler: function (val) {
                    this.tableDatacolumn = val;
                },
                deep: true,
                immediate: true,
            },
            searjuery: {
                handler: function (val) {
                    this.searjuery = val;
                },
                deep: true,
                immediate: true,
            },
            tableData: {
                handler: function (val) {
                    this.$set(this.tableData, val);
                    // this.tableData = val
                },
                deep: true,
                immediate: true,
            },
            sqid: {
                handler: function (val) {
                    this.sqid = val;
                },
                deep: true,
                immediate: true,
            },
            ispagination: {
                handler: function (val) {
                    this.ispagination = val;
                },
                deep: true,
                immediate: true,
            },
            // height:{
            //   handler:function(val){
            //     this.height = val
            //   },
            //   deep: true,
            //   immediate: true
            // }
        },
        methods: {
            inputVal(e,key,row){
                console.log('e-------------',e)
                console.log('key-------------',key)
                console.log('row-------------',row)
                this.$emit('countCost')
            },
            tcFd(row){
                console.log(' @click="tcFd(scope.row[item.key])"',row)
                this.$emit('showBig',row)
            },
          //设置选中
          statesz(data){
            const _this=this
              this.$nextTick(()=>{
                 _this.tableData.forEach(e =>{
                    for(let i=0;i<data.length;i++){
                      if(e.id == data[i].id){
                        _this.$refs.table.toggleRowSelection(e,true);
                      }
                    }
                  })
              })
          },
            //设置选中---结算反显
            statesJs(data){
                const _this=this
                this.$nextTick(()=>{
                    _this.tableData.forEach(e =>{
                        for(let i=0;i<data.length;i++){
                            if(e.replacementApplyDetailId== data[i].replacementApplyDetailId){
                                _this.$refs.table.toggleRowSelection(e,true);
                            }
                        }
                    })
                })
            },
            statesJs1(data){
                const _this=this
                this.$nextTick(()=>{
                    _this.tableData.forEach(e =>{
                        for(let i=0;i<data.length;i++){
                            if(e.mciId== data[i].mciId){
                                _this.$refs.table.toggleRowSelection(e,true);
                            }
                        }
                    })
                })
            },
            statesMsdId(data){
                const _this=this
                this.$nextTick(()=>{
                    _this.tableData.forEach(e =>{
                        for(let i=0;i<data.length;i++){
                            if(e.msdId== data[i].msdId){
                                _this.$refs.table.toggleRowSelection(e,true);
                            }
                        }
                    })
                })
            },
          qxAtate(){
           this.$refs.table.clearSelection();
          },
            shzt(row){

                this.$emit("showShzt",row)
            },
            showTree() {
                if (this.showOrTree) {
                    this.showOrTree = false
                } else {
                    this.showOrTree = true
                }
                this.$emit("showTree")
            },
            pickerOptions(start) {
                if (start) {
                    return {
                        disabledDate(time) {
                            return (
                                time.getTime() > Date.now() - 8.64e6 ||
                                time.getTime() < new Date(start) - 86400000
                            );
                        },
                    };
                } else {
                    return {
                        disabledDate(time) {
                            return time.getTime() > Date.now() - 8.64e6;
                        },
                    };
                }
            },
            //点击每行触发，目前是为了表格单选
            handleRowClick(row){
                this.$emit("handleRowClick", row);
            },
            handleSizeChange(val) {
                this.$emit("handleSizeChange", val);
            },
            handleCurrentChange(val) {
                this.$emit("handleCurrentChange", val);
            },
            //多选触发
            handleSelectionChange(e){
                if(this.applyNumber >0){
                    if(e.length > this.applyNumber){
                        this.$message.error('已选择超过最大数量')
                        let arr = e.slice(0,this.applyNumber)
                        let arr1 = e.slice(this.applyNumber,e.length)
                        arr1.forEach( e =>{
                            this.$refs.table.toggleRowSelection(e);
                        })
                        this.$emit("handleSelectionChange", arr);
                    }else{
                        this.$emit("handleSelectionChange", e);
                    }
                }else{
                    this.$emit("handleSelectionChange", e);
                }
            },
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return "background-color:#daf2ed;";
                }
            },
            rowClass({row, rowIndex}) {
                if (rowIndex % 2 == 0) {
                    return "Zebralattice";
                } else {
                    return "";
                }
            },
            Import(row) {
                this.$emit("Import", row);
            },
            Exporttemplate(row) {
                this.$emit("Exporttemplate", row);
            },
            handleClick(row) {
                this.$emit("linkTo", row);
            },
            handleClickN(index){
                this.activeN=index
                this.$emit('qhCont', index);
            },
            handleApproval(row) {
                this.$emit("handleApproval", row);
            },
            handleEdit(row) {
                this.$emit("editTo", row);
            },
            sortlist(column) {
                this.$emit("sort", column.prop, column.order);
            },
            onlysort(key) {
                this.$emit("onlysort", key);
            },
            handlewithdraw(row) {
                this.$emit("handlewithdraw", row);
            },
            handledel(row) {
                this.$emit("handledel", row);
            },
            exportdaochu() {
                this.$emit("exportdaochu");
            },
            templateDownload() {
                this.$emit("templateDownload");
            },
            changeQuantity(row){
                this.$emit('changeQuantity',row)
            },
            add() {
                this.$emit("add");
            },
            changeStatus(row) {
                this.$emit("changeStatus", row);
            },
            handlecomplete(row) {
                this.$emit("handlecomplete", row);
            },
            handlehandle(row) {
                this.$emit("handlehandle", row);
            },
            // 预览图片
            filePreview(url, index) {
                if (url) {
                    this.view.visible = true;
                    const previewSrcList = [];
                    const arr = url.split(",");
                    arr.forEach((item) => {
                        previewSrcList.push(this.ftpDownload + item);
                    });
                    this.view.previewSrcList = previewSrcList;
                    this.view.initialIndex = index;
                }
            },
            // 关闭预览图片
            closeViewer() {
                this.view.visible = false;
            },
            getfwlx(val, key) {
                this.$emit("getfwlx", val, key, this.unitCities);
            },
            getArea(data, scope) {
                let str = "";
                data &&
                data.map((item) => {
                    str += scope[item] ? scope[item] + "-" : "";
                });
                str ? (str = str.substring(0, str.length - 1)) : "";
                return str;
            },
        },
    };
</script>
<style>
    .el-table thead{
        color: #000000 !important;

    }
    .blue-font{
        cursor: pointer;
        color:#20a0ff ;
    }
    .fenye {
        padding: 20px 0;
        text-align: right;
    }

    .el-table.tableList td,
    .el-table.tableList th.is-leaf,
    .el-table td {
        /*border-bottom: none !important;*/
    }

    .image {
        width: 50px;
        height: 50px;
    }

    .pic-iitem {
        color: #335dff;
        cursor: pointer;
        padding: 0 10px;
    }

    .width1 {
        width: calc(100% - 220px) !important;
    }

    .tablelist_wrap {
        position: relative;
    }

    .left-btn {
        position: absolute;
        top: 50%;
        width: 12px;
        left: 0;
        height: 70px;
        background: #409EFF;
        border-radius: 0px 7px 7px 0px;
        color: #ffffff;
        padding-top: 28px;
        padding-right: 5px;
    }
    .table_title_little .table_btn{
        margin-left: 10px;
    }
    .table_title_little .btn_del{
        border: 1px solid #FFD5D5;
        color: #DE0000;
    }
    .table_title_little .btn_add{
        border: 1px solid #3583FC;
        color: #3583FC;
        background: #ffffff;
    }
    .table_title_big{

      /*  margin-bottom: 18px;*/
        /*border-bottom: 1px solid #F2F2F2;*/
    }
    .table_title_big .statistics{
        line-height: 66px;
        font-size: 16px;
        color: #00194A;
        font-weight: bold;
    }
    .single-image{
        display: flex;flex-wrap: wrap;justify-content: center;
    }
    .single-image u{
        text-decoration:none;
    }
    .cell{
        font-size: 15px;
    }
    .el-table__fixed-right::before{
        background: none;
        bottom: -1px !important;
        content: none !important;
    }
    .el-table__fixed,.el-table__fixed-right{
        /*top: -2px !important;*/
    }
    .add-tips{
        display: flex;

    }
    .tip-btn-box{
        display: flex;
        padding-top: 10px;
        padding-left: 20px;
        font-size: 15px;

    }
    .tip-btn-box div{
        padding: 20px;
        background: #eceaea;
        margin-right: 20px;
        cursor: pointer;
    }
    .tip-btn-box  .active{
        background: #1890ff;
        color: #ffffff;
    }
    .image-code-box{
        position: relative;
        width: 136px;
        height: 56px;
    }

    .image-code{
        width: 50px;
        height: 50px;
    }
    .lens {
        position: absolute;
        top: 0%;
        left: 0%;
        color: #ffffff;
        font-size: 15px;
        width: 136px;
        height: 56px;
        line-height: 56px;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
        z-index: 1;
    }

</style>
